<template>
  <div class="wrap">
    <div class="signature">
      <img v-for="(item, index) in urls" :key="index" :src="item" alt="" />
      <button class="btn1" @click="ClearSignature">清除</button>
    </div>
    <div class="canvasWrap">
      <canvas id="canvas" width="300" height="350"> </canvas>
      <div class="btnWrap">
        <button class="item" @click="toClear()">取消</button>
        <button class="item" @click="toComfir()">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sign-name',
  data() {
    return {
      ctx: null,
      canvas: null,
      url: '',
      urls: [],
      timer: null,
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    ClearSignature() {
      this.urls = []
    },
    initPage() {
      this.canvas = document.getElementById('canvas')
      if (this.canvas.getContext) {
        this.ctx = this.canvas.getContext('2d')
        let background = '#ffffff'
        this.ctx.lineCap = 'round'
        this.ctx.fillStyle = background
        this.ctx.lineWidth = 2
        this.ctx.fillRect(0, 0, 300, 350)

        this.canvas.addEventListener('touchstart', (e) => {
          this.ctx.beginPath()
          this.ctx.moveTo(
            e.changedTouches[0].pageX - 20,
            e.changedTouches[0].pageY - 120
          )
        })

        this.canvas.addEventListener('touchmove', (e) => {
          this.ctx.lineTo(
            e.changedTouches[0].pageX - 20,
            e.changedTouches[0].pageY - 120
          )
          this.ctx.stroke()
        })
        this.canvas.addEventListener('touchend', (e) => {
          this.endDraw()
        })
      }
    },
    toClear() {
      this.ctx.clearRect(0, 0, 300, 350)
    },
    endDraw() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.toSave()
        this.ctx.clearRect(0, 0, 300, 350)
      }, 2000)
    },
    toSave() {
      let base64Img = this.canvas.toDataURL()
      // this.url = base64Img;
      this.urls.push(base64Img)
      console.log(123, this.urls)
    },
    toComfir() {
      console.log('this.urls ', this.urls)
    },
  },
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 10px;
  .signature {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
    display: flex;
    box-sizing: border-box;
    border-radius: 10px;
    img {
      width: 45px;
      height: 45px;
      display: inline-block;
      object-fit: contain;
    }
    .btn1 {
      position: absolute;
      right: 25px;
      top: 25px;
      background: rgb(48, 48, 236);
      color: #fff;
      width: 50px;
      height: 30px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
  }
  .canvasWrap {
    width: 100%;
    height: 500px;
    position: relative;
    canvas {
      position: fixed;
      top: 120px;
      left: 25px;
      border: 2px dashed #cccccc;
      background: #ccc;
    }
    .btnWrap {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: space-around;
      height: 100px;
      .item {
        background: rgb(48, 48, 236);
        color: #fff;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px 10px;
      }
    }
  }
}
</style>
